<template>
  <div class="turn-class-two">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">

      <div class="widget-body  am-fr">
        <div class="am-u-sm-12 am-form ">

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <select2  v-model="query.busTeamId" :options="busTeams">
                <option value="">业务组</option>
              </select2>
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <select2 v-model="query.gradeId" :options="grades" disabled>
                <option value="">年级</option>
              </select2>
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <select2 v-model="query.subjectId" :options="subjects">
                <option value="">科目</option>
              </select2>
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <input type="text" class="am-form-field" placeholder="班级名" v-model="query.className">
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-u-end">
            <div class="am-form-group">
              <button type="button" class="am-btn am-btn-default am-btn-success"
                      @click="search"><span class="am-icon-search"></span>查询班级
              </button>
            </div>
          </div>

        </div>

        <div class="am-u-sm-12">
          <el-table
            :data="tableData"
            border
            stripe
            height="300"
            style="min-width: 100%">
            <el-table-column
              fixed
              prop="classNo"
              label="班级编号"
              min-width="100">
            </el-table-column>
            <el-table-column
              fixed
              prop="className"
              label="班级名称"
              min-width="200">
            </el-table-column>
            <el-table-column
              prop="periodName"
              label="期数"
              min-width="100">
            </el-table-column>
            <el-table-column
              prop="campusName"
              label="校区"
              min-width="100">
            </el-table-column>
            <el-table-column
              prop="studyingFee"
              label="学费"
              min-width="100">
            </el-table-column>
            <el-table-column
              label="开始讲数"
              min-width="140">
              <template scope="scope">
                <input type="number" @focus="resetErrStatus(scope.$index,'start')" require :class="{ 'error-input' : scope.row.startErr }" class="am-form-field am-input-sm es-input" v-model="scope.row.startAmount"
                       @change="check(scope.row)"/>
                <div v-if="scope.row.startErr" class="tips">请填写开始讲数</div>
              </template>
            </el-table-column>
            <el-table-column
              label="结束讲数"
              min-width="150">
              <template scope="scope">
                <input type="number" @focus="resetErrStatus(scope.$index,'end')" require :class="{ 'error-input' : scope.row.endErr }" class="am-form-field am-input-sm es-input" v-model="scope.row.endAmount" @change="check(scope.row)"/>
                <div v-if="scope.row.endErr" class="tips">请填写结束讲数</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="gradeName"
              label="年级"
              min-width="100">
            </el-table-column>
            <el-table-column
              label="剩余名额"
              min-width="100">
              <template scope="scope">
                {{scope.row.quota-scope.row.regAmount}}
                </template>
            </el-table-column>
            <el-table-column
              prop="quota"
              label="学位数"
              min-width="100">
            </el-table-column>
            <el-table-column
              prop="teacherName"
              label="教师"
              min-width="100">
            </el-table-column>
            <el-table-column
              label="已上/总讲数"
              min-width="100">
              <template scope="scope">
                {{scope.row.completedLectureAmount}}/{{scope.row.lectureAmount}}
                </template>
            </el-table-column>
            <el-table-column
              prop="busTeamName"
              label="业务组"
              min-width="100">
            </el-table-column>
            <el-table-column
              label="开课日期"
              min-width="100">
              <template scope="scope">
                {{scope.row.startCourseTime | formatDate }}
                </template>
            </el-table-column>
            <el-table-column
              prop="studyingTime"
              label="上课时间"
              min-width="100">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template scope="scope">
                <el-button size="small" :disabled="!scope.row.allow || scope.row.regAmount == scope.row.quota " @click.native="confirm(scope.row)">确定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="am-u-lg-12 am-cf">

        <div class="am-fr">
          <pagination v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize" @paging="loadTableData"/>
        </div>
      </div>

    </div>

    <div class="am-u-sm-12 am-text-center">
      <button type="button" class="am-btn am-btn-primary" @click="back">上一步</button>
    </div>


  </div>

</template>

<script>
  import io from '../../lib/io'
  import Pagination from '../base/Pagination'

  export default{
    data: function () {
      return {
        tableData: [{
          classNo:12312,
          campusName: '2323ssf',
          studyingFee: 223
        }],
        total: 0,
        pageSize: 10,
        pageNo: 1,
        query: {
          status : 1,
          gradeId:'',
          subjectId:''
        },
        srcClass:{},
        srcStudentReg:{},
        changeLectureFrom:0,
        busTeams:[],
      }
    },
    props: ['args', 'regId'],
    components: {
      Pagination,
    },
    created:function(){
      this.srcClass = this.args['step-one'].srcClass
      this.srcStudentReg = this.args['step-one'].srcStudentReg
      this.changeLectureFrom = this.args['step-one'].changeLectureFrom
      this.query.areaTeamId  = this.srcClass.areaTeamId
      this.query.busTeamId  = this.srcClass.busTeamId
      this.query.periodId  = this.srcClass.periodId
      this.query.gradeId  = this.srcClass.gradeId
      this.query.subjectId  = this.srcClass.subjectId
      this.query.studyingFee =this.srcClass.studyingFee
    //  this.query.level=this.srcClass.level
      this.loadTableData(1)
      this.loadAllBusTeamList()
    },
    computed: {
      grades: function () {
        return this.$root.config.grades.map(function (item) {
          return {value: item.gradeId, text: item.gradeName}
        })
      },
      subjects: function () {
        return this.$root.config.subjects.map(function (item) {
          return {value: item.subjectId, text: item.subjectName}
        })
      },

    },
    methods: {
      resetErrStatus(index,type){
        if(type == 'start'){
          this.$set(this.tableData[index],'startErr',false)
        }
        if(type == 'end'){
          this.$set(this.tableData[index],'endErr',false)
        }
      },
      check: function (item) {
        if (parseInt( item.startAmount ) <= 0 || parseInt( item.startAmount ) > parseInt( item.lectureAmount ) ) {
          item.startAmount = 1
        }

        if (parseInt( item.endAmount ) < 0 || parseInt( item.endAmount ) > parseInt( item.lectureAmount ) ) {
          item.endAmount = item.lectureAmount
        }

      },
      search: function () {
        this.loadTableData(1)
      },
      loadTableData: function (pageNo) {
        var _this = this
        _this.pageNo = pageNo || _this.pageNo || 1

        io.post(io.apiAdminCourseClassForReg, $.extend({
          pageNo: _this.pageNo,
          pageSize: _this.pageSize,
        }, _this.query), function (ret) {

          if (ret.success) {
            _this.total = ret.data.total

            var courseList  = []

            for (var i = 0; i < ret.data.list.length; i++) {

              ret.data.list[i].completedLectureAmount = parseInt(ret.data.list[i].completedLectureAmount)
              ret.data.list[i].startAmount = ''
              ret.data.list[i].endAmount = ''
              ret.data.list[i].startErr = false
              ret.data.list[i].endErr = false

              if (  _this.srcClass.lectureAmount == ret.data.list[i].lectureAmount && _this.changeLectureFrom > ret.data.list[i].completedLectureAmount  ) {
                ret.data.list[i].allow = true
              } else {
                ret.data.list[i].allow = false
              }

              if(ret.data.list[i].classId != _this.srcClass.classId ){//过滤
                courseList.push(ret.data.list[i])
              }
            }
            _this.tableData = courseList
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      loadAllBusTeamList: function () {
        var _this = this
        io.post(io.allBusTeamList, {
          areaTeamId : this.query.areaTeamId
        }, function (ret) {
          if (ret.success) {
            _this.busTeams = ret.data.map(function (item) {
              return {value: item.busTeamId, text: item.name}
            })
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      confirm: function (item) {
        if(!item.endAmount || !item.startAmount){
          if(!item.endAmount){
            item.endErr = true
          }
          if(!item.startAmount){
            item.startErr = true
          }
          return
        }

        if(item.endAmount - item.startAmount != this.srcStudentReg.endAmount - this.changeLectureFrom ){
          this.$alert('转入讲次必须等于转出讲次，请重新核对！')
          return
        }
        if(item.startAmount<=item.completedLectureAmount){
          this.$alert('转入讲次必须未考勤')
          return
        }

        this.$emit('goStep', 'step-three', item )
      },
      back: function () {
        this.$emit('goStep', 'step-one' )
      }
    }
  }


</script>
<style lang="less">
  .turn-class-two{
    .es-input{
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .error-input{
      border: 1px solid red;
    }
    .tips{
      color: red;
    }
  }
</style>
